<template>
    <div>
      <el-button type="primary" plain  @click="add">增加</el-button>
       <div class="product">
        <el-table :data="product_s.getLists" style="width: 100%">
        <el-table-column type="selection" width="55" />
    <el-table-column prop="no" label="序号" width="80" align="center" />
    <el-table-column prop="productId" label="编号" width="180" />
    <el-table-column prop="productName" label="产品名称" width="180" />
    <el-table-column prop="productPlan" label="产品计划" width="180" />
    <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.objectId)">删除</el-button>
        </template>
      </el-table-column>
  </el-table>
  <div>
    <el-pagination background layout="prev, pager, next" :total="1000" />
  </div>
      

       </div>
    </div>
</template>

<script setup lang="ts">
import { reactive,onMounted } from 'vue';
import {delProduct} from '../../http/product'
import { ElMessage } from 'element-plus'
import type {Product} from '../../typing/product'
import router from '../../router';
import productStore from '../../store/productStore';
import {productM, iProductM} from '../../hooks/productM'
const product_s =productStore()
const productMH :iProductM = productM()

// const tableData=reactive< dataInfo>({
//    list:[],
//    curPage:1,
//    pageSize:10,
//    total:0
// })

onMounted(() => {
    productList()
})

function productList(){
   productMH.productListHook()
}
function handleDelete(objectId:string){
  productMH.deleteProductHook(objectId)

}
const handleEdit=(row: Product)=>{
    router.push({path:'/home/productadd',query:{
      objectId: row.objectId
    }})
}
const add=()=>{
    router.push({path:'/home/productadd'})
}
</script>

<style lang="scss" scoped>
.product{
  border: 2px rgb(224, 224, 224) solid ;
  border-radius:20px;
  box-shadow: 4px 4px 4px 4px rgba(180, 180, 179, 0.5);
  padding: 20px;
  margin-top:20px ;
}
</style>